<template>
  <image src="https://falvren.oss-cn-beijing.aliyuncs.com/2025061117102592ac1.png" class="w-[750rpx] h-[364rpx] z-[-1] reltive rounded-b-[30rpx] top-0"></image>
  <view class="px-[32rpx]">
    <view class="mt-[-42rpx]  flex align-center justify-between">
      <view style="border: #000000 solid 2rpx;" class="w-[532rpx] h-[76rpx] bg-[#FFFFFF] flex justify-between rounded-[8rpx]">
        <view class="flex items-center  pl-[24rpx]">
          <picker mode="region" :value="selectedRegion" @change="onRegionChange">
            <view class="flex items-center">
              <view class="font-[500] text-[28rpx] font-[#000000] leading-[40rpx] text-left ">{{ selectedCity }}</view>
              <image src="@/static/images/img/xb_1.png" class="w-[40rpx] h-[40rpx] mr-[8rpx]"></image>
            </view>
          </picker>
          <view class="">
            <input class="w-[100rpx] h-[40rpx] " type="text" placeholder="请输入"
              placeholder-style="color:#999999;font-size:24rpx;font-weight:400;font-family:PingFangSC;" />
          </view>
        </view>

        <view class="w-[132rpx] h-[60rpx] pt-[6rpx] mr-[8rpx] rounded-[4rpx]">
          <up-button @click="push('/pages_qc/grope/grope')" text="搜索" :customStyle="{
            width: '132rpx',
            height: '60rpx',
            color: '#000000',
            borderRadius: '6rpx',
            fontSize: '28rpx',
            fontWeight: '500',
            fontFamily: 'PingFangSC',
            background: 'linear-gradient( 98deg, #FFF8DD 0%, #FFD856 100%)',
            border: '0'

          }"></up-button>
        </view>
      </view>
      <view>
        <image @click="kfa" src="@/static/images/img/kf_1.png" class="w-[60rpx] h-[60rpx] mt-[8rpx] mr-[12rpx]"></image>
        <image @click="push('/pages_qc/msg/msg')" src="@/static/images/img/ld_1.png" class="w-[60rpx] h-[60rpx]"></image>
      </view>
    </view>
    <!-- 筛选条件 -->
    <view @click="kfa" class=" w-[686rpx] flex justify-between mt-[24rpx]  ">
      <view class="flex items-center mr-[20rpx]">
        <text class="text-[28rpx]">排序</text>
        <image src="@/static/images/img/xb_1.png" class="w-[28rpx] h-[28rpx] ml-[4rpx]"></image>
      </view>
      <view class="flex items-center mr-[20rpx]">
        <text class="text-[28rpx]">品牌</text>
        <image src="@/static/images/img/xb_1.png" class="w-[28rpx] h-[28rpx] ml-[4rpx]"></image>
      </view>
      <view class="flex items-center mr-[20rpx]">
        <text class="text-[28rpx]">价格</text>
        <image src="@/static/images/img/xb_1.png" class="w-[28rpx] h-[28rpx] ml-[4rpx]"></image>
      </view>
      <view class="flex items-center">
        <text class="text-[28rpx]">筛选</text>
        <image src="@/static/images/img/xb_1.png" class="w-[28rpx] h-[28rpx] ml-[4rpx]"></image>
      </view>
    </view>

    <!-- 品牌列表 -->
    <view @click="wsd" class="w-[686rpx] mt-[26rpx] flex flex-wrap justify-between">
      <view v-for="(item, index) in brandList.slice(0, 12)" :key="index"
        class="flex flex-col h-[140rpx] w-[114rpx] items-center mb-[20rpx]">
        <image :src="item.brand_logo || '@/static/images/img/baomadd.png'" class="w-[68rpx] h-[68rpx] rounded-full"></image>
        <view class="text-[24rpx] text-[#333] mt-[12rpx] text-center w-full brand-name">{{ item.brand_name }}</view>
      </view>
    </view>
    <!-- 跟进收车 -->
    <view claas="w-[686rpx] h-[732rpx] reltive">
      <image src="@/static/images/img/bg_bg.png" class="w-[686rpx] h-[732rpx] absolute z-[-1]"></image>
      <view class="flex justify-between pt-[20rpx] pl-[24rpx]">
        <image class="w-[326rpx] h-[36rpx]" src="@/static/images/img/title.png"></image>
        <view @click="qb" class="flex items-center pr-[12rpx]">
          <text
            class="mr-[8rpx] font-normal text-[24rpx] text-[#999999] leading-[36rpx] text-left font-[PingFangSC]">查看全部</text>
          <up-icon name="arrow-right" color="#909399" size="28rpx"></up-icon>
        </view>
      </view>
      <view class="mt-[24rpx] m-[32rpx]  overflow-hidden rounded-[16rpx]  relative">
        <up-notice-bar style="border: 1rpx solid #FFFFFF;padding: 20rpx 0 20rpx 8rpx;" icon=" " fontSize="24rpx"
          speed="180rpx" bgColor="#FFFFFF" color="#C49906" text="湖北省武汉市丁先生上门收购奔驰GLC一台"></up-notice-bar>
        <view class="absolute py-[20rpx] top-[-10rpx] px-[8rpx] bg-[#FFFFFF]">
          <image class="w-[41rpx] h-[43rpx]" src="@/static/images/img/5.png" mode=""></image>
        </view>
      </view>
      <!-- 信息框 -->
      <view class="px-[24rpx]">
        <view class="flex justify-between items-center">
          <view class="flex items-center">
            <view>
              <up-avatar size="84rpx" :src="src"></up-avatar>
            </view>
            <view class="ml-[12rpx]">
              <view class="text-[28rpx] font-[400] text-[#000000] font-[PingFangSC]">{{ firstCarData?.userName || '大橘子' }}</view>
              <view class="text-[22rpx] font-[400] text-[#999999] font-[PingFangSC]">{{ firstCarData?.location || '湖北省武汉市洪山区' }}</view>
            </view>
          </view>
          <view><up-button type="primary" text="包看车" @click="kfa" :customStyle="{
            width: '132rpx',
            height: '60rpx',
            background: 'linear-gradient( 98deg, #FFF8DD 0%, #FFEAA2 100%)',
            borderRadius: '12rpx',
            fontSize: '28rpx',
            padding: '10rpx 24rpx',
            border: '0',
            color: '#000000',
            fontWeight: '500',
          }"></up-button>
          </view>
        </view>
        <view class="text-[28rpx] font-[500] text-[#000000] text-[PingFangSC] mt-[24rpx]">要卖 {{ firstCarData?.brandModel || '宝马5系' }}</view>
        <view class="asd mt-[20rpx] px-[20rpx] py-[28rpx]">
          <view class="flex justify-between mb-[16rpx]">
            <view class="text-[24rpx] text-[#666]">
              <text class="text-[#999]">上牌时间：</text>{{ firstCarData?.registrationTime || '2020-01-01' }}
            </view>
            <view class="text-[24rpx] text-[#666]">
              <text class="text-[#999]">行驶里程：</text>{{ firstCarData?.mileage || '50000公里' }}
            </view>
          </view>
          <view class="flex justify-between mt-[32rpx] mb-[16rpx]">
            <view class="text-[24rpx] text-[#666]">
              <text class="text-[#999]">车辆颜色：</text>{{ firstCarData?.vehicleColor || '黄色' }}
            </view>
            <view class="text-[24rpx] text-[#666] mr-[55rpx]">
              <text class="text-[#999]">多久卖车：</text>{{ firstCarData?.sellTimeLimit || '3个月' }}
            </view>
          </view>
          <view class="text-[24rpx] text-[#666] mt-[32rpx] overflow-hidden">
            <text class="text-[#999]">车况如何：</text>{{ firstCarData?.vehicleCondition || '轻微磨损，没有大修，真皮内饰，使用...' }}
          </view>
        </view>
        <view @click="kfa" class="btn flex justify-center items-center ">
          <image src="@/static/images/img/sd.png" class="w-[28rpx] h-[52rpx]" />
          <text class="ml-[22rpx] gradient-text">同城精准车源 马上抢单</text>
        </view>
      </view>
    </view>
    <!-- 推荐车源部分 -->
    <view class="mt-[54rpx] rounded-[20rpx] pt-[8rpx] ">
      <!-- 标签切换 -->
      <view class="flex justify-around pt-[8rpx]"
        style="background: linear-gradient(to bottom, #FFEFB8 0%, #FFFFFF 100%)">
        <view
          class=" w-[216rpx] h-[116rpx] relative flex flex-col rounded-[20rpx] justify-center bg-[#FFFFFF] align-center ">
          <text class="text-[32rpx] font-bold">推荐车源</text>
          <view class="active-indicator"></view>
        </view>
        <view style="background: linear-gradient( Bottom, #FFEFB8 80%, #FFFFFF 120%);" class=" w-[216rpx] h-[116rpx]   flex flex-col rounded-[20rpx] justify-center align-center  ">
          <text class="text-[32rpx] text-[#999]">推荐车源</text>
        </view>
        <view style="background: linear-gradient( Bottom, #FFF5D3 100%, #FFFFFF 100%);" class="w-[216rpx] h-[116rpx]  flex flex-col rounded-[20rpx] justify-center align-center">
          <text class="text-[32rpx] text-[#999]">推荐车源</text>
        </view>
      </view>
    
      <!-- 车源卡片横向滚动 - 修改为动态数据 -->
      <scroll-view scroll-x class=" whitespace-nowrap bg-[#FFFFFF]" show-scrollbar="false">
        <!-- 加载状态 -->
        <view v-if="recommendLoading" class="inline-block mr-[20rpx] w-[236rpx] bg-[#F5F5F5] rounded-[12rpx] overflow-hidden">
          <view class="w-[236rpx] h-[144rpx] bg-[#E0E0E0] flex items-center justify-center">
            <text class="text-[24rpx] text-[#999]">加载中...</text>
          </view>
          <view class="p-[12rpx]">
            <view class="w-[150rpx] h-[28rpx] bg-[#E0E0E0] rounded-[4rpx] mb-[8rpx]"></view>
            <view class="w-[100rpx] h-[28rpx] bg-[#E0E0E0] rounded-[4rpx]"></view>
          </view>
        </view>
        
        <!-- 动态车源数据 -->
        <view v-else-if="recommendCarList.length > 0" v-for="(car, index) in recommendCarList.slice(0, 6)" :key="index"
          class="inline-block mr-[20rpx] w-[236rpx] bg-[#FFFFFF] rounded-[12rpx] overflow-hidden"
          :class="{ 'mr-0': index == Math.min(recommendCarList.length, 6) - 1 }">
          <image :src="car.vehiclePictures || car.image || '@/static/images/game_logo/pst.png'" 
            class="w-[236rpx] h-[144rpx] mt-[5rpx] ml-[8rpx] rounded-[12rpx]" mode="aspectFill"></image>
          <view class="p-[12rpx]">
            <view class="text-[28rpx] font-[400] text-[#000000] font-[PingFangSC] overflow-hidden" 
              style="display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;">
              {{ car.brandModel || car.name || '宝马5系 530Li 3' }}
            </view>
            <view class="text-[28rpx] text-[#FF0000] font-bold">
              ¥{{ car.newPrice || car.guidingPrice || car.price || '****' }}万
            </view>
          </view>
        </view>
        
        <!-- 无数据状态 -->
        <view v-else class="inline-block w-[236rpx] bg-[#F5F5F5] rounded-[12rpx] overflow-hidden">
          <view class="w-[236rpx] h-[144rpx] bg-[#E0E0E0] flex items-center justify-center">
            <text class="text-[24rpx] text-[#999]">暂无数据</text>
          </view>
          <view class="p-[12rpx]">
            <view class="text-[28rpx] font-[400] text-[#999] font-[PingFangSC]">暂无推荐车源</view>
            <view class="text-[28rpx] text-[#999] font-bold">¥--万</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="mt-[-50rpx]">
      <view>
        <view class="mt-[54rpx] rounded-[20rpx] pt-[8rpx]">
          <!-- 标签切换 -->
          <view class="flex justify-around pt-[8rpx]"
           >
            <view v-for="(tab, index) in tabs" :key="index"
              class="w-[216rpx] h-[116rpx] relative flex flex-col rounded-[20rpx] justify-center align-center"
              :class="selectedTabIndex == index ? 'bg-[#FFFFFF]' : 'bg-[#FFFDF6]'" @click="selectTab(index)">
              <text :class="selectedTabIndex == index ? 'text-[32rpx] font-bold' : 'text-[32rpx] text-[#999]'">{{
                tab.name }}</text>
              <view v-if="selectedTabIndex == index" class="active-indicator"></view>
            </view>
          </view>

          <!-- 车源卡片横向滚动 -->
          <!-- <scroll-view v-if="carList.length > 0" scroll-x class="mt-[10rpx] whitespace-nowrap bg-[#FFFFFF]"
            show-scrollbar="false">
            <view v-for="(car, index) in carList" :key="index"
              class="inline-block mr-[20rpx] w-[236rpx] bg-[#FFFFFF] rounded-[12rpx] overflow-hidden"
              :class="{ 'mr-0': index == carList.length - 1 }">
              <image :src="car.image || '@/static/images/game_logo/pst.png'" class="w-[236rpx] h-[144rpx]"></image>
              <view class="p-[12rpx]">
                <view class="text-[28rpx] font-[400] text-[#000000] font-[PingFangSC]">{{ car.name || '宝马5系 530Li' }}
                </view>
                <view class="text-[28rpx] text-[#FF0000] font-bold">¥{{ car.price || '****' }}万</view>
              </view>
            </view>
          </scroll-view>
          <view v-else class="py-[30rpx] text-center text-[28rpx] text-[#999]">暂无数据</view> -->


          <!-- 车源列表 -->
          <view class="car-list">
            <view v-if="carList.length == 0" class="py-[30rpx] text-center text-[28rpx] text-[#999]">暂无数据</view>
            <view v-for="(car, index) in carList" :key="index" class="car-item mb-[24rpx]">
              <view class="flex">
                <image :src="car.vehiclePictures || '/static/images/game_logo/patw.png'"
                  class="w-[200rpx] h-[150rpx] rounded-[8rpx]" mode="aspectFill"></image>
                <view class="ml-[16rpx] flex-1">
                  <view class="text-[28rpx] font-bold leading-[40rpx]">{{ car.brandModel || '大众一2022款 帕萨特2.0TSI330TSI星空精英版'}}</view>
                  <view class="flex items-center text-[24rpx] text-[#999] mt-[8rpx]">
                    <text>{{ car.registrationTime ? car.registrationTime.substring(0, 4) : '2022' }}</text>
                    <text class="mx-[8rpx]">/</text>
                    <text>{{ car.mileage || '7.9万公里' }}</text>
                  </view>
                  <view class="flex justify-between  mt-[8rpx]">
                    <view class="text-[24rpx] text-[#999]">{{ car.createTime || '2025-04-12 12:23:12' }}</view>
                    <view class="flex flex-col items-center mt-[-40rpx]">
                      <text class="text-[28rpx] text-[#FF0000] font-bold">{{ car.newPrice || car.guidingPrice }}万</text>
                      <text class="text-[24rpx] text-[#999] ml-[12rpx]">{{ car.location || '武汉' }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>



    </view>
  </view>
  <tabBar />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getBrandList, getBrandListByType, getBrand, getRecommend } from '@/api/sy'

// 数据定义
const src = ref('https://falvren.oss-cn-beijing.aliyuncs.com/202506101256294aa49.jpeg') // 头像
const brandList = ref([]) // 品牌列表数据
const carList = ref([]) // 车源列表数据
const loading = ref(false) // 加载状态
const selectedTabIndex = ref(0) // 当前选中的标签索引
// 新增：推荐车源数据
const recommendCarList = ref([]) // 推荐车源列表
const recommendLoading = ref(false) // 推荐车源加载状态
// 省市区选择器相关
const selectedRegion = ref([0, 0, 0]) // 选中的省市区索引
const selectedCity = ref('全国') // 当前显示的城市名称

// 定义标签数据，包含名称和对应的isTop值
const tabs = [
  { name: '默认', isTop: 0 },
  { name: '新上架', isTop: 1 },
  { name: '新能源', isTop: 2 },
  { name: '有检测', isTop: 3 },
  { name: '再降价', isTop: 4 }
]

// 页面跳转方法
const push = (path) => {
  uni.navigateTo({
    url: path
  })
}
//提示功能在开发中
const kfa = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none',
    duration: 2000
  })
}
// 地区选择回调
const onRegionChange = (e) => {
  const { value } = e.detail
  selectedRegion.value = value
  
  // 获取选择的地区名称数组
  const regionNames = e.detail.postcode ? [] : []
  
  // 通过uni.getSystemInfo获取地区信息，或者使用自定义的地区数据
  // 这里简化处理，直接使用picker返回的数据
  if (value && value.length >= 2) {
    // 只显示市名
    selectedCity.value = value[1]
  } else if (value && value.length >= 1) {
    // 如果只选择了省，显示省名
    selectedCity.value = value[0]
  } else {
    selectedCity.value = '全国'
  }
  
  console.log('选择的地区:', value)
  console.log('显示的城市:', selectedCity.value)
  
  // 这里可以根据选择的地区进行相应的业务逻辑处理
  // 比如根据地区筛选车源数据等
}

// 选择标签方法
const selectTab = (index) => {
  if (selectedTabIndex.value == index) return
  selectedTabIndex.value = index
  getCarList(tabs[index].isTop)
}
// 新增：获取推荐车源数据
const getRecommendCarList = async () => {
  recommendLoading.value = true
  try {
    const res = await getRecommend({
      pageNum: 1,
      pageSize: 10 // 获取10条推荐数据
    })
    
    if (res.code == 200) {
      if (res.rows && Array.isArray(res.rows)) {
        recommendCarList.value = res.rows
      } else {
        // 处理其他数据格式
        try {
          if (typeof res.msg == 'object') {
            if (res.msg.result) {
              recommendCarList.value = res.msg.result
            } else if (res.msg.rows) {
              recommendCarList.value = res.msg.rows
            }
          } else {
            const parsedData = JSON.parse(res.msg)
            if (parsedData && parsedData.result) {
              recommendCarList.value = parsedData.result
            } else if (parsedData && parsedData.rows) {
              recommendCarList.value = parsedData.rows
            }
          }
        } catch (parseError) {
          console.error('解析推荐车源数据出错:', parseError)
          uni.showToast({
            title: '数据格式错误',
            icon: 'none'
          })
        }
      }
    } else {
      uni.showToast({
        title: res.msg || '获取推荐车源失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('获取推荐车源出错:', error)
    uni.showToast({
      title: '获取推荐车源异常',
      icon: 'none'
    })
  } finally {
    recommendLoading.value = false
  }
}

// 获取车源列表数据
const getCarList = async (isTop) => {
  loading.value = true
  carList.value = []

  try {
    const res = await getBrandListByType({ isTop })
    if (res.code == 200) {
      // 直接使用返回的数据
      if (res.rows && Array.isArray(res.rows)) {
        carList.value = res.rows
      } else {

        try {

          if (typeof res.msg == 'object') {
            if (res.msg.result) {
              carList.value = res.msg.result
            } else if (res.msg.rows) {
              carList.value = res.msg.rows
            }
          } else {
            // 尝试解析字符串
            const parsedData = JSON.parse(res.msg)
            if (parsedData && parsedData.result) {
              carList.value = parsedData.result
            } else if (parsedData && parsedData.rows) {
              carList.value = parsedData.rows
            }
          }
        } catch (parseError) {
          console.error('解析车源数据出错:', parseError)
          uni.showToast({
            title: '数据格式错误',
            icon: 'none'
          })
        }
      }
    } else {
      uni.showToast({
        title: res.msg || '获取车源列表失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('获取车源列表出错:', error)
    uni.showToast({
      title: '获取车源列表异常',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}
const wsd=()=>{ 
  uni.switchTab({
	url: '/pages/sc'
});
}
// 获取品牌列表方法
const fetchBrandList = async () => {
  try {
    const res = await getBrandList()
    if (res.code == 200) {
      const parsedMsg = JSON.parse(res.msg)
      brandList.value = parsedMsg.result
    }
  } catch (error) {
    console.error('获取品牌列表出错:', error)
  }
}

// 新增：轮询相关变量
const pollingTimer = ref(null) // 轮询定时器
const firstCarData = ref(null) // 存储第一个车源数据

onMounted(() => {
  // 获取默认标签的车源数据
  getCarList(tabs[0].isTop)
  
  // 获取推荐车源数据
  getRecommendCarList()
  
  // 开始轮询获取车源数据
  startPolling()
})

onLoad(() => {
	console.log(123123123123)
  wx.loadFontFace({
  	global: true,
  	family: 'PingFangSC',
  	source: `url("https://cy.sry6.com/pingf.otf")`,
  	success: (e) => {
  		console.log('字体加载成功!', e);
  	},
  	fail: function(e) {
  		console.log(e, '字体加载失败！');
  	}
  });
})


onUnmounted(() => {
  stopPolling()
})


onShow(() => {
  if (!pollingTimer.value) {
    startPolling();
    fetchBrandList()
  }
})


const onHide = () => {
  stopPolling()
}

// 轮询获取车源数据的方法
const startPolling = () => {
 
  fetchFirstCarData()
  
  // 每10秒执行一次
  pollingTimer.value = setInterval(() => {
    fetchFirstCarData()
  }, 10000) 
}

// 停止轮询
const stopPolling = () => {
  if (pollingTimer.value) {
    clearInterval(pollingTimer.value)
    pollingTimer.value = null
  }
}

// 获取第一个车源数据
const fetchFirstCarData = async () => {
  try {
    const res = await getBrand({})
    if (res.code == 200 && res.rows && res.rows.length > 0) {
  
      firstCarData.value = res.rows[0]
      console.log('获取到第一个车源数据:', firstCarData.value)
      
      // 可以在这里更新UI显示第一个车源的信息
      updateCarDisplay(firstCarData.value)
    } else {
      console.log('暂无车源数据')
    }
  } catch (error) {
    console.error('获取车源数据失败:', error)
  }
}

// 更新车源显示信息
const updateCarDisplay = (carData) => {
  // 这里可以根据获取到的第一个车源数据更新页面显示
  // 例如更新信息框中的内容
  if (carData) {
    // 可以更新页面中的车源信息显示
    console.log('更新车源显示:', {
      brandModel: carData.brandModel || '宝马5系',
      registrationTime: carData.registrationTime || '2020-01-01',
      mileage: carData.mileage || '50000公里',
      vehicleColor: carData.vehicleColor || '黄色',
      sellTimeLimit: carData.sellTimeLimit || '3个月',
      vehicleCondition: carData.vehicleCondition || '轻微磨损，没有大修，真皮内饰，使用...'
    })
  }
}
const qb = () => {
  uni.switchTab({
	url: '/pages/sc'
});
}
</script>

<style lang="scss" scoped>
.asd {
  width: 638rpx;
  height: 228rpx;
  background: rgba(255, 255, 255, 0.67);
  border-radius: 16rpx;
}

.btn {
  width: 500rpx;
  height: 96rpx;
  background: linear-gradient(98deg, #000000 0%, #454545 100%);
  border-radius: 16rpx;
  margin: 0 auto;
  margin-top: 32rpx;
}

.gradient-text {
  background: linear-gradient(180deg, #FFE788 0%, #FFF6D7 100%);
  -webkit-background-clip: text;
  font-weight: 600;
  font-size: 32rpx;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

}

/* 推荐车源样式 */
.active-indicator {
  // position: absolute;
  // bottom: -8rpx;
  // left: 50%;
  // transform: translateX(-50%);
  width: 72rpx;
  height: 8rpx;
  background-color: #FFC915;
  border-radius: 4rpx;
  margin-top: 4rpx;
}

.tag {
  padding: 8rpx 16rpx;
  font-size: 24rpx;
  border-radius: 4rpx;
  background-color: #F5F5F5;
  color: #333;
}

.active-tag {
  background-color: #FFF0B3;
  color: #000;
  position: relative;
}

.active-tag::after {
  content: '';
  position: absolute;
  bottom: -4rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 24rpx;
  height: 4rpx;

  border-radius: 2rpx;
}

.car-item {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 16rpx;
}

.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;

  -webkit-box-orient: vertical;
  word-break: break-all;
  line-height: 28rpx;
}
</style>